<template>
  <div id="Area">
      <select name="" id="povice" v-model="selected" @change="poviceChange">
        <option :value='index' v-for="(povice, index) in all">{{povice.name}}</option>
      </select>
      <select name="" id="city" v-model="cityNum" @change="cityChange">
        <option :value="index" v-for="(city, index) in cityList">{{city}}</option>
      </select>
      <select name="" id="area" v-model="areaNum">
        <option :value="index" v-for="(area, index) in areaList">{{area}}</option>
      </select>
      <div v-for="(item ,index) in sdf">
          <span>{{item.name}}</span>
          <span>{{item.age}}</span>
          <button @click="deleteUser(index)">删除</button>
      </div>
  </div>
</template>
<script>
export default {
  name: "Area",
  data() {
    return {
      all: [],
      cityIndex: 0,
      areaIndex: 0,
      cityList: [],
      areaList: [],
      nowCity: [],
      selected: 0,
      cityNum: 0,
      areaNum: 0
    };
  },
  methods: {
    getJson: function() {
      this.$http.get("static/area.json").then(
        res => {
          console.log(res);
          this.all = res.body;
          this.initCity();
        },
        res => {
          console.log(res);
          alert(res.statusText);
        }
      );
    },
    initCity: function() {
      this.cityList = [];
      var city = this.all[this.cityIndex].cityList;
      for (var i = 0; i < city.length; i++) {
        this.cityList.push(city[i].name);
      }
      this.nowCity = city;
      this.initArea();
    },
    initArea: function() {
      this.areaList = [];
      var area = this.nowCity[this.areaIndex].areaList;
      for (var i = 0; i < area.length; i++) {
        this.areaList.push(area[i]);
      }
    },
    poviceChange: function(event) {
      // console.log(event);

      console.log(this.selected.name);
      this.cityIndex = event.target.value;
      this.cityNum = 0;
      this.areaNum = 0;
      this.areaIndex = 0;
      this.initCity();
    },
    cityChange: function(event) {
      this.areaIndex = event.target.value;
      this.areaNum = 0;
      this.initArea();
    }
  },
  created: function() {
    this.getJson();
  },
  props:{
    sdf:{
      type:Array
    }
  }
};
</script>
<style scoped>
select {
  width: 200px;
}
option {
  width: 200px;
}
</style>


